import React, {PureComponent} from 'react';
import {StyleSheet, View, Text, TouchableOpacity, Image, ScrollView} from 'react-native';

export default class extends PureComponent {
    render() {
        const {currentPage, total, currentItem, getCouponUrl, navigation} = this.props;
        return (
            <View style={styles.container}>
                <View style={styles.titleWrap}>
                    <Text style={styles.title}>{currentItem.title}</Text>
                </View>
                <ScrollView style={{height: 100}}>
                    <View style={styles.descWrap}>
                        <Text style={styles.sortWrap}><Text style={styles.sortCurrent}>{currentPage + 1}</Text>/{total}
                        </Text>
                        <Text style={styles.descText}>{currentItem.content}</Text>
                    </View>
                </ScrollView>
                <View style={styles.btnWrap}>
                    <TouchableOpacity onPress={() => {
                        getCouponUrl(currentItem.num_iid);
                    }}>
                        <View style={styles.couponWrap}>
                            <Text style={styles.couponText}>立即抢{currentItem.coupon_value}元优惠券</Text>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => {
                        navigation.navigate('share', {itemId: currentItem.num_iid});
                    }}>
                        <Image source={require('./img/icon_share.png')} style={styles.shareImg}/>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#f0f0f0'
    },
    titleWrap: {
        position: 'absolute',
        width: '100%',
        left: 0,
        top: -40,
        paddingLeft: 16,
        paddingRight: 16,
        backgroundColor: 'rgba(61,61,61,.5)'
    },
    title: {
        height: 40,
        lineHeight: 40,
        fontSize: 13,
        color: '#fffbfb'
    },
    descWrap: {
        paddingTop: 10,
        paddingLeft: 10,
        paddingRight: 10
    },
    descText: {
        fontSize: 12,
        color: '#4c4d49',
        lineHeight: 20
    },
    sortWrap: {
        marginRight: 12,
        paddingRight: 12,
        fontSize: 12,
        color: '#4c4d49'
    },
    sortCurrent: {
        fontSize: 15
    },
    btnWrap: {
        paddingLeft: 22,
        paddingRight: 22,
        flexDirection: 'row',
        height: 54,
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    couponWrap: {
        paddingLeft: 16,
        paddingRight: 16,
        borderRadius: 28,
        paddingTop: 8,
        paddingBottom: 8,
        backgroundColor: '#f42f19'
    },
    couponText: {
        color: '#fff',
        fontSize: 14
    },
    shareImg: {
        width: 20,
        height: 20
    }
});
